<template>
  <div class style="height: 100%;">
    <div
      class="guanwangtable"
      :style="{'--titlefont': datatablestyless.titlefontSize,'--px80i': datatablestyless.px80i,'--px20i': datatablestyless.px80i,'--px40i': datatablestyless.px40i,'--contentfont': datatablestyless.contentfontSize,height: 'calc(100% - ' + scaal + 'px)',}"
    >
      <dv-scroll-board :config="config" style="height: 100%;" class="tableconfig" />
    </div>
  </div>
</template>
<script>
import axios from "@/utils/requestzz";;
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

export default {
  name: "datatableguanwang",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      tableconfigsize: "30px!important",
      ishistory: "实时",
      config: {
        header: [],
        data: [],
        rowNum: 4,
        headerBGC: "#11183C99",
        oddRowBGC: "#040A2199",
        evenRowBGC: "#21284399",
        // columnWidth: [250 * this.$root.setting.scale,110 * this.$root.setting.scale,110 * this.$root.setting.scale,150 * this.$root.setting.scale,],
      }
    };
  },
  computed: {
    scaal(){
      return ((navigator.userAgent.indexOf("Firefox")>0 ) ? 0 : (this.$root.setting.scale * 50))
    }
  },
  watch: {
    "$store.state.daping.queryDbPipenet": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  mounted() {},
  methods: {
    loadData(pipenetDataObj) {
      let _this = this;

      //异步获取数据
      //setinterval  或者websocket
      //设置option

      //g_queryDBUrl
      this.config.header = [
        "管网名称",
        "热量(MW)",
        "流量(t/h)",
        "平均流量(kg/(h*㎡))",
        "热单耗(W/㎡)"
      ];
      // this.config.header = this.componentDetail.content.header;

      _this.config.data = [];

      let dataa = [];
      [1, 2, 3, 4].forEach((v, i, arr) => {
        let pipeName =
          v == 1 ? "一" : v == 2 ? "二" : v == 3 ? "三" : v == 4 ? "四" : "-";

        dataa.push([
          '<span style="color:#DB181C;">' + pipeName + "号管网" + "</span>",
          '<span style="color:#DB181C;">' +
            (pipenetDataObj["sa_003qc@" + v] ||
            pipenetDataObj["sa_003qc@" + v] == 0
              ? Number(pipenetDataObj["sa_003qc@" + v] / 3.6).toFixed(1)
              : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (pipenetDataObj["sa_001q@" + v] ||
            pipenetDataObj["sa_001q@" + v] == 0
              ? Number(pipenetDataObj["sa_001q@" + v]).toFixed(1)
              : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (pipenetDataObj["sa_056q@" + v] ||
            pipenetDataObj["sa_056q@" + v] == 0
              ? Number(pipenetDataObj["sa_056q@" + v] * 1000).toFixed(2)
              : "-") +
            "</span>",
          '<span style="color:#0CA92C;">' +
            (pipenetDataObj["sa_056qc@" + v] ||
            pipenetDataObj["sa_056qc@" + v] == 0
              ? Number(
                  (pipenetDataObj["sa_056qc@" + v] / 3.6) * 1000000
                ).toFixed(2)
              : "-") +
            "</span>"
        ]);
      });
      let tmp_config = JSON.parse(JSON.stringify(_this.config));
      tmp_config.data = dataa;
      _this.config = tmp_config;
    }
  }
};
</script>
<style lang='scss'>
.dv-scroll-board {
  .header .header-item {
    // font-size: 40px;
    color: #53f3f3;
    font-size: var(--titlefont);
    white-space: normal;
    height: var(--px80i) !important;
    line-height: var(--px40i) !important;
    // padding: auto;
  }

  .rows {
    .ceil {
      white-space: normal;
      word-break: break-all;
      // height: var(--px80i) !important;
      line-height: var(--px40i) !important;
      // padding-top: var(--px20i);
      // padding-top: 20px;
    }
    .row-item {
      font-size: var(--contentfont);
      // height: var(--px80i) !important;
      line-height: var(--px40i) !important;
    }
  }
}
</style>